<template>
  <div class="home-containe">
    <!-- 顶部导航栏 -->
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          round
          class="search-btn"
          size="small"
          icon="search"
          @click="$router.push({ path: './search' })"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- tab 栏 -->
    <van-tabs v-model="active" placeholder @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <template #label>
                <div>
                  <van-grid :column-num="item.cover.type">
                    <van-grid-item
                      v-for="(value, index) in item.cover.images"
                      :key="index"
                    >
                      <van-image :src="value" lazy-load />
                    </van-grid-item>
                  </van-grid>
                  <div class="moment">
                    <span>{{ item.aut_name }} </span>&nbsp
                    <span>{{ item.comm_count }}评论</span> &nbsp
                    <span>{{ item.pubdate | fromNow }}</span>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getArticleList, getChannelList } from "./home.js";
// 日期导包
import moment from "moment";
// 设置日期语言
moment.locale("zh-cn");
// 图片懒加载
import { Lazyload } from "vant";
export default {
  name: "home",
  data() {
    return {
      active: 0,
      list: [],
      loading: false,
      finished: false,
      // count: 0,
      isLoading: false,
      // 频道列表
      channels: [],
      timestamp: null,
    };
  },
  async created() {
    let res = await getChannelList();
    // console.log(res);
    // 绑定数据
    this.channels = res.data.data.channels;
  },
  methods: {
    async onLoad() {
      // 判断是不是第一页
      if (!this.timestamp) {
        this.timestamp = Date.now();
      }
      //  请求数据
      let res = await getArticleList({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp,
      });
      // console.log(res);
      // 储存服务器返回的时间戳用于请求下一页数据
      this.timestamp = res.data.data.pre_timestamp;
      // 添加数据
      this.list.push(...res.data.data.results);
      // console.log(res);
      // 修改 loading 为 false 本次加载结束
      this.loading = false;
      // 如果超过 100 条数据 这个歌时候就不在触底
      if (this.list.length >= 100) {
        this.finished = true;
      }
    },
    // 下拉刷新事件
    onRefresh() {
      // 一旦下拉刷新 无条件修改上拉列表 finished 为 false
      this.finished = false;
      this.timestamp = null;
      // 清空当前数据
      this.list = [];
      // 重新加载数据
      this.loading = true;
      // 重新请求数据
      this.onLoad();
      // 关闭下拉刷新动画 否则顶部动画会一直转圈
      this.isLoading = false;
    },
    // tab 栏切换
    tabClick() {
      // 清空列表
      this.onRefresh();
      // this.list = [];
      // this.timestamp = unll;
      // // 设置 loading 状态 true 开始加载
      // this.loading = true;
      // // 主动调用 onLoad
      // this.loading();
    },
  },
  //过滤器
  filters: {
    fromNow(value) {
      return moment(value).fromNow();
    },
  },
};
</script>

<style lang="less">
.van-nav-bar__content {
  /* 1.顶部栏 */
  background-color: #5babfb;
  .logo {
    /* 注意点
      如果在图片路径中使用@，默认前面会有./(./@/image.png) 导致编译器报错
      解决： 在@前面添加~ (去掉默认./)
      */
    background: url("../../assets/homeLogo.png") no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
}
.home-containe {
  // 1vh = 屏幕高度 1/100
  height: 100vh;
  // padding-top: 44px;
  padding-bottom: 50px;
  box-sizing: border-box;

  // 搜索按钮
  .search-btn {
    background-color: #5babfb;
    width: 100px;
    font-size: 14px;
    border: none;
    .van-icon {
      color: #fff;
    }
    .van-button__text {
      color: #fff;
    }
  }
  // tab 栏切换
  /* 2.tablan布局 */
  .van-tabs {
    /* 2.1 头部tab栏 */
    .van-tabs__wrap {
      position: fixed;
      /* 解决频道列表不能自动滚动bug
    当频道列表数据很多的时候会被内容撑开，导致无法自动滚动。给一个宽度即可
    */
      width: 100%;
      top: 44px;
      z-index: 10;
      width: 100%;
    }

    /* 2.2 内容 */
    .van-tabs__content {
      /* 设置列表栏的上margin,避免被导航栏与tab栏遮挡(固定定位导致脱标) */
      margin-top: 44px;
      /* 设置列表栏的下margin,避免被底部栏脱标导致遮挡 */
      margin-bottom: 50px;
    }
  }
}
</style>
